<template>
	<view class="order-wraper">
		<!-- <admin-manger v-if="type == 0 || type == 1 || type == 2 || type == 3"></admin-manger> -->
		<!-- <custom-manger v-if="type == 3"></custom-manger> -->
		<!-- 管理员订单管理 -->
		<view class="fixed-border"></view>
		<view class="tp">
			<view class="item search-c flex">
				<label class="label">搜索</label>
				<view class="label-content s-inpu">
					<input class="input" type="text" placeholder="按订单号/客户名称等关键字" placeholder-class="hover-style" v-model.trim="searchValue" cursor='10' confirm-type="search" @confirm='search'>								<uni-icons v-if="searchValue" style="position: absolute;top: 16rpx;right: 12rpx;z-index: 99;" type="buoumaotubiao20" size="20" color="#c0c4cc" @click.stop="clearS(1)"></uni-icons>
				</view>
			</view>
			<view class="item search-c flex">
				<label class="label">日期</label>
				<view class="label-content s-inpu">
					<view class="date" :class="[sendDate ?'':'placeholder']" @click="toggleTab('senddate')">{{sendDate?sendDate:'请选择送货日期'}}</view>
					<uni-icons v-if="sendDate" style="position: absolute;top: 16rpx;right: 12rpx;" type="buoumaotubiao20" size="20" color="#c0c4cc" @click="clearS(2)"></uni-icons>
				</view>
			</view>
			<view class="item select-t flex">
				<label class="label">类型</label>
				<view class="label-content">
					<xfl-select
					:list="list"
					:clearable="true"
					:showItemNum="5" 
					:isCanInput="false"  
					:style_Container="listBoxStyle"
					@change = "selectChange"
					@clear = 'clear'
					>
					</xfl-select>
				</view>
			</view>
		</view>
		<view class="order-lists">
			<!-- <view class="order-header flex">
				<view class="num">订单编号</view>
				<view class="status">状态</view>
				<view class="date">日期</view>
			</view> -->
			<scroll-view :scroll-top="scrollTop" scroll-y="true" v-if="orderLists.length > 0">
				<!-- <view class="order-item  flex flex-center" v-for="(item,index) in orderLists" :key='index' @click="goDetail(item.id)">
					<view class="num flex"><view>{{item.orderNo}}</view><uni-icons v-if="item.flag == 0" style="margin-left: 6rpx;" type="daifu" size="14" color="rgba(52,120,247,.8)"></uni-icons></view>
					<view class="status" :class="{dsh:item.status == 0,ysh:item.status == 2,yfh:item.status == 6,yqx:item.status == 8}">{{item.status | orderStatus }}</view>
					<view class="date">{{item.orderDate}}</view>
				</view> -->
				<view class="order-items"  v-for="(item) in orderLists" :key='item.id' @click="goDetail(item.id)">
					<view class="item flex">
						<view>{{item.customerName}}</view>
						<view class="status" :class="{dsh:item.status == 0,ysh:item.status == 2,yfh:item.status == 6,yqx:item.status == 8}">{{item.status | orderStatus }}</view>
					</view>
					<view class="item flex">
						<view>{{item.orderNo}}<uni-icons v-if="item.flag == 0" style="margin-left: 6rpx;display: inline-block;" type="daifu" size="14" color="rgba(52,120,247,.8)"></uni-icons></view>
						<view>{{item.createBy}}</view>
					</view>
					<view class="item flex">
						<view>{{item.sendDate | formatWeek}}</view>
						<view >¥{{item.totalMoney | fixedTwo}}</view>
					</view>
				</view>
				<uni-load-more :status="loadStatus" :content-text="contentText" @clickLoadMore="clickLoadMore" />
			</scroll-view>
			<view class="empty-order" v-else>没有数据...</view>
		</view>	
		<view class="add-btn" @click="addOrder" v-if="type != 2">新增</view>
		<!-- 送货日期选择 -->
		<w-picker
			mode="date" 
			startYear="2017" 
			endYear="2030"
			:defaultVal="defaultSendDate"
			:current="false" 
			@confirm="onConfirm"
			:disabledAfter="false"
			ref="senddate" 
			themeColor="#f00"
		></w-picker>
	</view>
</template>

<script>
	import customManger from './customManger.vue'
	import adminManger from './adminManger.vue'
	import xflSelect from '../../components/select/xfl-select.vue'
	import uniIcons from '@/components/uni-icon/uni-icon.vue'
	import Request from '@/request/request.js'
	import wPicker from "@/components/w-picker/w-picker.vue"
	import dayjs from '@/common/dayjs.min.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components:{
			customManger,
			adminManger,
			xflSelect,
			uniIcons,
			wPicker,
			uniLoadMore
		},
		data() {
			return {
				testCount:1,
				type:0,
				scrollTop:0,
				 old: {
					scrollTop: 0
				},
				list:["全部","待审核","已审核","已发货","已取消"],
				listBoxStyle:`height: 70rpx; font-size: 12px;width:100%`,
				defaultSendDate:dayjs().format('YYYY-MM-DD'),//默认送货日期
				sendDate:'',//送货日期
				orderLists:[],
				searchValue:'',//输入框搜索条件
				status:'',//订单状态 0 待审核 2 已审核 6 已发货 8 已取消
				pageNum:1,//当前页码
				pageSize:30,//每页加载订单数量
				totalPage:1,//订单总页数
				loadStatus:'more',//订单列表状态
				contentText: {
					contentdown: '点击加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},
		onLoad() {
			this.type = this.$store.state.cusType
		},
		onShow() {
			this.getOrderList();
		},
		onHide(){
			
		},
		filters:{
			orderStatus(status){
				let str = '待审核'
				switch(status){
					case '0':
						str = '待审核'
						break;
					case '2':
						str = '已审核'
						break;
					case '6':
						str = '已发货'
						break;
					case '8':
						str = '已取消'
						break;
				}
				return str
			},
			formatWeek(val){
				let num = dayjs(val).format('d')
				let days = ''
				switch (Number(num)){
					case 0:
						days = '周日'
						break;
					case 1:
						days = '周一'
						break;
					case 2:
						days = '周二'
						break;
					case 3:
						days = '周三'
						break;
					case 4:
						days = '周四'
						break;
					case 5:
						days = '周五'
						break;
					case 6:
						days = '周六'
						break;
				}
				return  val + ' '+ days
			},
			fixedTwo(val){
				return val ? val.toFixed(2):''
				// return val.toFixed(2)
			}
		},
		methods: {
			toggleTab(str){
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord()
				// #endif
				this.toggleType = str
				this.$refs[str].show();
			},
			onConfirm(val){
				switch(this.toggleType){
					case 'orderdate':
						this.orderDate = val.result;
						break
					case 'senddate':
						this.sendDate = val.result;
						this.orderLists = []
						this.pageNum = 1;
						this.getOrderList()
						break;
				}
			},
			clearS(val){
				if(val == 1){
					this.searchValue = ''
				}else if(val == 2){
					this.sendDate = ''
				}
				this.pageNum = 1;
				this.orderLists = []
				this.getOrderList()
			},
			addOrder(){
				uni.navigateTo({
					url:'../addOrder/addOrder'
				})
			},
			search(e){
				this.pageNum = 1;
				this.orderLists = []
				this.getOrderList();
			},
			selectChange(e){
				switch(e.orignItem){
					case '待审核':
						this.status = 0
						break;
					case '已审核':
						this.status = 2
						break;
					case '已发货':
						this.status = 6
						break;
					case '已取消':
						this.status = 8
						break;
					default:
					        this.status = '';
				}
				this.pageNum = 1;
				this.orderLists = []
				this.getOrderList();	
			},
			onHide(){
				this.orderLists = []
			},
			clear(){
				this.status = ''
				this.pageNum = 1;
				this.orderLists = []
				this.getOrderList();
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			getOrderList(){
				if(this.pageNum == 1){
					this.scrollTop = this.old.scrollTop
					this.$nextTick(() => {
						this.scrollTop = 0
					});
				}
				
				Request({url:`order/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,data:{searchValue:this.searchValue,status:this.status,sendDate:this.sendDate}})
				.then(res =>{				
					if(res.code == 0){
						this.totalPage = Math.ceil(res.total/this.pageSize)
						this.loadStatus = this.pageNum == this.totalPage?'noMore':'more';
						if(this.orderLists.length > 0){
							// this.orderLists = [...this.orderLists,...res.rows]
							this.orderLists.push(...res.rows)
						}else{
							this.orderLists = res.rows || []
						}	
					}
					
				}).catch(err => {})
			},
			goDetail(id){
				// return
				uni.navigateTo({
					url:`../orderDetail/orderDetail?orderId=${id}`
				})
			},
			clickLoadMore(){
				if(this.pageNum >= this.totalPage){
					this.loadStatus = 'noMore'
					return
				}
				this.pageNum++;
				this.loadStatus = 'loading'
				this.getOrderList()
			}
		}
	}
</script>

<style lang="less">
.order-wraper{
	@borderBottom:#ECECEC;
	height: 100%;
	width: 100%;
	color: #535050;
	display: flex;
	flex-direction: column;
	.tp{
		padding-top: 1rpx;
		.item{
			
			padding: 0 80rpx;
			margin-top: 8rpx;
			height: 80rpx;
			align-items: center;
			&:first-of-type{
				margin-top: 14rpx;
			}
			.label{
				width: 70rpx;
			}
			.label-content{
				flex: 1;
				position: relative;
				&.s-inpu{
					height: 70rpx;
					display: flex;
					align-items: center;
					border: 1px solid #c0c4cc;
					padding-left: 20rpx;
					background-color: #FFFFFF;
					font-size: 14px;
					border-radius: 12rpx;
				}
				.date{
					width: 100%;
					height: 100%;
					line-height: 70rpx;
					&.placeholder{
						color: #bbb;
					}
				}
				.hover-style{
					color: #959292;
					font-size: 12px;
				}
				input{
					width: 100%;
				}
			}
		}
	}
	.order-lists{
		// height: calc(100% - 310rpx);
		flex: 1;
		height: 0;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		box-shadow: -1px 0 6px #999;
		scroll-view{
			height: 100%;
			// background-color: red;
			.order-item{
				height: 100rpx;
				border-bottom: 2rpx solid @borderBottom;
				padding: 0 20rpx;
				text-align: center;
				.num{
					width: 320rpx;
					justify-content: center;
					align-items: center;
				}
				.status{
					width: 160rpx;
					// color: #FB4949;
					&.subs{
						color: #4EA65A;
					}
					&.dsh{
					    color: rgb(255, 0, 0);
					}
					&.ysh{
						color: rgb(52,120,247,.8);
					}
					&.yfh{
						color: rgb(95, 184, 120);
					}
					&.yqx{
						
					}
				}
				.date{
					flex:1;
				}
				&:last-of-type{
					// border-bottom: none;
				}
			}
			.order-items{
				padding: 10rpx 30rpx;
				border-bottom: 2rpx solid @borderBottom;
				.item{
					justify-content: space-between;
					line-height: 44rpx;
				}
				.status{
					&.subs{
						color: #4EA65A;
					}
					&.dsh{
					    color: rgb(255, 0, 0);
					}
					&.ysh{
						color: rgb(52,120,247,.8);
					}
					&.yfh{
						color: rgb(95, 184, 120);
					}
					&.yqx{
						
					}
				}
			}
		}
		.empty-order{
			color: #666666;
			margin: 40px;
			text-align: center;
		}
		
	}
	.add-btn{
		position: fixed;
		right: 40rpx;
		bottom: 70px;
		width: 96rpx;
		height: 95rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 96rpx;
		border-radius: 50%;
		background-color: rgba(52,120,247,.8);
		box-shadow: 0 0 4rpx #000;
		color: rgb(255, 255, 255);
	}
}
</style>
